<template>
	<view class="shopcart" v-if="getAllCount">
		<view class="subtraction-zone" v-if="activityList.length"> 
			<text v-for="(item,index) in activityList" :key="index"> {{item.text}} </text>
		</view>		<!-- 选择的商品 -->
		<view class="cartList" v-if="isShowList && getList.length">
			<scroll-view scroll-y >
				<view class="title">
					<text>已选商品</text>
					<view class="clear" @click="delShopcart">
						<text class="iconfont" style="font-size: 15px;">&#xe60f;</text>清空购物车
					</view>
				</view>
				<view class="list">
					<view class="list-text" v-for="(item,index) in getList" :key="index">
						<text class="list-text-name">
							<text class="subtraction-zone-icon" v-show="item.satisfy && item.reduce">
							满{{item.satisfy}}减{{item.reduce}}
							</text>
							{{item.name}} 
						</text>
						<text style="flex:1;text-align: left;color: $base-color;">￥{{item.price}}</text>
						<cartcontrol :food="item" @add="addCart" @dec="decreaseCart"></cartcontrol>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 购物车行 -->
		<view class="cartBottom">
			<view class="carIcon" @click="toggleList">
				<view class="iconBox" :class="getAllCount ? 'active' : '' ">
					<text class="allcount" v-if="getAllCount">{{getAllCount}}</text>
					<text class="iconfont">&#xe609;</text>
				</view>
			</view>
			<view class="middle" @click="toggleList">
				<text class="price" :class="getAllCount ?　'active': ''" style="font-size:16px;">
					￥{{getAllPrice}}
					<text class="food-primeCost" v-if="getOidAllPrice != getAllPrice">￥{{getOidAllPrice}}</text>
				</text>
				<text class="deliveryPrice" style="font-size: 12px;color:#d6d6d6;" v-if="deliveryFee">
					另需配送费￥{{deliveryFee}} 
				</text>
				<text class="deliveryPrice" style="font-size: 12px;color:#d6d6d6;" v-if="!deliveryFee">
					免配送费 
				</text>
			</view>
			<view class="btnRight" style="background:none;color:#d6d6d6;" v-show="getAllPrice < satisfy">
				还差￥{{ (satisfy - getAllPrice).toFixed(2) }}
			</view>
			<button  v-show="getAllPrice >= satisfy" class="btnRight" type="warn" open-type="getUserInfo" @tap="settlement(1)" @getuserinfo="settlement" withCredentials="true" >去结算</button>
		</view>
		<!-- 黑幕 -->
		<view class="listMask" v-if="isShowList && getList.length" @click="toggleList"></view>
	</view>
</template>

<script>
	import config from '@/config/config'
	import cartcontrol from '@/components/sl-ui/sl-tamp/cartcontrol.vue'
	import { mapState,mapActions } from 'vuex'
	export default {
		props: {
			goods: { type: Array },
			deliveryFee: {
				type: [String,Number],
				default: function () {
				    return 0
				}
			},
			satisfy: {
				type: [String,Number],
				default: function () {
				    return 0
				}
			}
		},
		data() {
			return {
				isShowList: false,
			};
		},
		components: {
			cartcontrol
		},
		computed: {
			...mapState(['forcedLogin', 'hasLogin', 'userInfo']),
			activityList(){
				let result = [];
				let activity_names = [];
				this.getList.forEach( h => {
					if(h.satisfy && h.reduce){
						let text = '';
						let reduce = 0;
						let activity_name = "满"+h.satisfy+"减"+h.reduce;
						let allPrice = 0;
						this.getList.map( k => {
							if( "满"+k.satisfy+"减"+k.reduce == activity_name ){
								allPrice += Number((k.count * k.price ).toFixed(2));
							}
						});
						if( allPrice >= h.satisfy){
							text = `${activity_name}专区已满${h.satisfy},结算减${h.reduce}`;
							reduce = h.reduce;
						}else{
							text = `${activity_name}专区再买${h.satisfy - allPrice}元,可减${h.reduce}`;
						}
						if(activity_names.indexOf(activity_name) == -1){
							result.push({
								activity_name:activity_name,
								text: text,
								reduce:reduce
							});
							activity_names.push(activity_name);
						}
					}
				});
				
				return result;
			},
			// 获得购物车列表
			getList() {
				let result = [];
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count) {
							result.push(food)
						}
					});
				});
				return result;
			},
			// 获得购物车所有商品数量
			getAllCount() {
				let result = 0;
				this.getList.forEach((food) => {
					result += food.count
				});
				return result;
			},
			// 实际总价
			getAllPrice() {
				let reduce = 0;
				if(this.activityList.length){
					this.activityList.map(h=>{  reduce +=h.reduce; })
				}
				return (this.getOidAllPrice - reduce).toFixed(2);
			},
			//原总价
			getOidAllPrice(){
				let result = 0;
				let result1 = 0;
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						result1 += food.count * food.price;
						result = result1.toFixed(2);
					});
				});
				return result;
			}
		},
		methods: {
			...mapActions(['autoModeLogin']),
			toggleList() {
				if (this.getList.length) {
					this.isShowList = !this.isShowList;
				}
			},
			delShopcart() {
				var that = this;
				uni.showModal({
					icon: 'none',
					position:"top",
					title:"提示",
					showCancel:true,
					content:"确定清空购物车？",
					success:function(e){
						if(e.confirm){
							that.isShowList= false;
							that.$emit('delAll');
						} 
					}
				});
			},
			addCart: function(item) {
				this.$emit('add', item)
			},
			decreaseCart(item) {
				if(this.getAllCount ==  1) this.isShowList= false;
				this.$emit('dec', item)
			},
			//结算
			settlement:function(mode){
				if(!this.hasLogin){
					this.autoModeLogin(mode).then(()=>{
						this.$emit('settlement');
					}).catch(res=>{   
						
					});
					return false;
				}
				if(config.webMode == 'wx-app' && mode == 1){
					return false;
				}
				this.$emit('settlement');
			}
		},
	}
</script>

<style scoped lang="scss">
	.shopcart{
		width: 100%;
		left: 0;
		right: 0;
	}
	.shopcart .subtraction-zone{
		text-align:center;
		background-color:#FCF5E5;
		font-size:10px;
		padding: 3px 0;
		position:relative;
		z-index:98;
	}
	.shopcart .subtraction-zone>text{
		width:100%;
		display: block;
		line-height: 16px;
	}
	.shopcart .subtraction-zone text text{
		color:$base-color;
	}
	.shopcart .cartBottom {
		position: relative;
		width: 100%;
		left: 0;
		right: 0;
		height: 54px;
		z-index: 99;
		display: flex;
		background-color: rgba(0, 0, 0, 0.8);
	}

	.carIcon {
		width: 80px;
	}

	.iconBox {
		position: absolute;
		bottom: 22px;
		left: 15px;
		z-index: 101;
		background-color: $base-color;
		border-radius: 50%;
		height: 48px;
		width: 48px;
		text-align:center;
		line-height: 48px;
		.iconfont{
			font-size: 32px;
			color: #FFFFFF;
		}
	}

	.iconBox .allcount {
		position: absolute;
		right: -6px;
		top: 0;
		display: inline-block;
		font-size: 9px;
		width: 16px;
		line-height: 16px;
		height: 16px;
		font-weight: 400;
		border-radius: 50%;
		background-color: #ffffff;
		color: #000000;
		border: 1px solid $base-color;
	}

	.carIcon .active {
		background-color: $base-color;
	}

	.middle {
		display: flex;
		flex-direction: column;
		flex: 2;
		color: #ffffff;
	}

	.btnRight {
		flex: 1;
		color: #FFFFFF;
		text-align: center;
		line-height: 54px;
		background: $base-color;
		border-radius: 0;
	}

	.cartList {
		position: relative;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 90;
	}
	.cartList .list {
		background: #FFFFFF;
	}
	.cartList .title,
	.cartList .list-text {
		display: flex;
		flex-direction: row;
	}
	.cartList .title {
		background: #EEEEEE;
		justify-content: space-between;
		padding: 5px 8px;
		color: #5d5d5d;
		margin: 0;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	.cartList .list-text {
		padding: 12px 6px 12px 15px;
		text-align: center;
		border-bottom: 1px solid #ececec;
	}
	.cartList .list-text .list-text-name{
		flex:2;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.cartList .list-text .subtraction-zone-icon{
		background-color: $base-color;
		line-height: 14px;
		height: 14px;
		font-size: 10px;
		padding: 2px;
		border-radius: 3px;
		color: #fff;
		margin-top: 4px;
		margin-right: 5px;
	}
	.food-primeCost {
		font-size: 12px;
		text-decoration:line-through;
		margin-left: 7px;
		color: #9e9e9e;
		line-height: 28px;
	}

	/* 遮布 */
	.listMask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 89;
		opacity: 0.6;
		background: #000000;
	}
</style>
